import React, { Component } from 'react'
import { FormattedMessage } from 'react-intl'
import { Icon } from 'antd-mobile'
import { PriceNumberStyle } from '../common'
import { ChartSimpleWrap } from './'
import { helper } from '../utils'
import { hashHistory } from 'react-router'

export default class CcyPairItem extends Component {
  onShowChart = (e,i) => {
    const { ccyPair } = this.props.val
    let chart = e.currentTarget.dataset.chart
    let comp = null
    let onOff = false
    if (onOff == this.state.flag) {
      comp = <div className="rt-chart-inner-wrap" style={{'height': '400px'}}>
        <Icon type="loading"/>
        <ChartSimpleWrap PAIR={ccyPair}/>
      </div>
      onOff = true
    }
    if (chart == this.state.selected) {
      chart = '-1'
      comp = null
    }
    this.setState({
      selected: chart,
      flag: onOff
    })
    this.addElement = comp
  }
  state = {
    bgSell: '-grey',
    bgBuy: '-grey',
    selected: '-1',
    flag: false,
    chartShow: true
  }
  addElement = null
  length= 6
  componentWillReceiveProps(nextProps) {
    if (nextProps.val.bidPriceVar < this.props.val.bidPriceVar) {
      this.setState({
        bgSell : '-red'
      })
    } else if (nextProps.val.bidPriceVar > this.props.val.bidPriceVar) {
      this.setState({
        bgSell : ''
      })
    }
    if (nextProps.val.askPriceVar < this.props.val.askPriceVar) {
      this.setState({
        bgBuy : '-red'
      })
    } else if (nextProps.val.askPriceVar > this.props.val.askPriceVar) {
      this.setState({
        bgBuy: ''
      })
    }
  }
  shouldComponentUpdate(nextProps, nextState) {
    if (nextProps.val == this.props.val && nextState.selected == this.state.selected && nextState.flag == this.state.flag && nextProps.chartShow == this.props.chartShow ) {
      return false
    }
    return true
  }
  componentDidMount() {
    const { val } = this.props
    if (val.ccyPair.includes('JPY')) {
      this.length = 4
    }
  }
  render() {
    const { val, index } = this.props
    const { bgSell, bgBuy } = this.state
    return (
      <div className="rt-item-wrap" onClick={() => {
          hashHistory.push({
            pathname: '/trade/order',
            query: {
              ccyPair: val.ccyPair
            }
          })
      }}>
        <div className="-item">
          <div className="-one-wrap">
            <span className="-top">
              <FormattedMessage id={helper.splitString(val.ccyPair)[0]}/>
              <span>/</span>
              <FormattedMessage id={helper.splitString(val.ccyPair)[1]}/>
            </span>
            <span className="-bottom">{val.ccyPair}</span>
          </div>
          <div className="-two-wrap">
            <div className="-right-top">
              <div className="-one">
                <span className={`-number ${bgSell}`}>
                  <span className="-rt-sell-icon">
                  {
                    bgSell == '-red' ? <Icon type={require('static/svg/icon_39.svg')}/> : bgSell == '' ?
                    <Icon type={require('static/svg/icon_40.svg')}/> : <Icon type={require('static/svg/icon_41.svg')}/>
                  }
                    
                  </span>
                  <PriceNumberStyle number={helper.accAdd(val.markupValueBid, val.bidPriceFix)}  className={bgSell} length={this.length}/>
                </span> 
              </div>
              <div className="-two" >
                <span>{helper.accMul(helper.accSub(val.askPriceVar,val.bidPriceVar), 100)}</span>
              </div>
              <div className="-three">
                <span className={`-number1 ${bgBuy}`}>
                  <span className="-rt-buy-icon">
                    {
                      bgBuy == '-red' ? <Icon type={require('static/svg/icon_42.svg')}/> : bgSell == '' ?
                      <Icon type={require('static/svg/icon_43.svg')}/> : <Icon type={require('static/svg/icon_44.svg')}/>
                    }
                  </span>
                  <PriceNumberStyle
                    number={helper.accAdd(val.markupValueAsk, val.askPriceFix)}
                    className={bgBuy}
                    length={this.length}
                  />
                </span>
              </div>
            </div>
            <div className="-right-bottom">
              {
                this.props.chartShow ?
                <div
                  data-chart={index}
                  className="-chart-btn"
                  onClick={
                    (e) => {
                      e.stopPropagation()
                      this.onShowChart(e,String(index))
                    }
                  }
                >
                  <Icon type={require('static/svg/m_chart.svg')}/>
                </div> : null
              }
            </div>
          </div>
        </div>
        <div className="rt-chart">
          {this.addElement}
        </div>
      </div>
    )
  }
}
